<template>
  <div class="panel">
    <!-- 控制正射影像显示的单选框 -->
    <div class="controls">
      <label>
        <input
          type="checkbox"
          v-model="showOrthoImage"
          @change="toggleOrthoImage"
        >
        显示正射影像
      </label>
    </div>

    <!-- 路径规划输入面板 -->
    <div class="route-panel">
      <!-- 起点输入 -->
      <div class="coordinate-row">
        <label>起点:</label>
        <input v-model="startLng" type="number" step="any" placeholder="经度">
        <span class="comma">,</span>
        <input v-model="startLat" type="number" step="any" placeholder="纬度">
        <button @click="selectStartPoint" class="select-btn">选点</button>
      </div>

      <!-- 终点输入 -->
      <div class="coordinate-row">
        <label>终点:</label>
        <input v-model="endLng" type="number" step="any" placeholder="经度">
        <span class="comma">,</span>
        <input v-model="endLat" type="number" step="any" placeholder="纬度">
        <button @click="selectEndPoint" class="select-btn">选点</button>
      </div>

      <button @click="planRoute" class="plan-btn">路径规划</button>
    </div>
  </div>

  <!-- 地图容器 -->
  <div id="geoserver-map" class="map-container"></div>
</template>



<script setup>
import {onMounted, ref} from 'vue';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

// 响应式数据控制正射影像显示
const showOrthoImage = ref(true);
let map = null;
let wmsLayer = null;

// 起终点坐标数据
const startLng = ref('');
const startLat = ref('');
const endLng = ref('');
const endLat = ref('');

// 图标引用
let startMarker = null;
let endMarker = null;

// 选点状态管理
let selectingPoint = null;

// 切换正射影像显示状态
const toggleOrthoImage = () => {
  if (!map || !wmsLayer) return;

  if (showOrthoImage.value) {
    // 添加图层到地图
    wmsLayer.addTo(map);
  } else {
    // 从地图移除图层
    map.removeLayer(wmsLayer);
  }
};

// 开始选择起点
const selectStartPoint = () => {
  selectingPoint = 'start';
  map.getContainer().style.cursor = 'crosshair';
};

// 开始选择终点
const selectEndPoint = () => {
  selectingPoint = 'end';
  map.getContainer().style.cursor = 'crosshair';
};

// 路径规划函数
const planRoute = () => {
  if (!map) return;

  // 清除之前的标记
  if (startMarker) {
    map.removeLayer(startMarker);
  }
  if (endMarker) {
    map.removeLayer(endMarker);
  }

  // 验证输入
  if (!startLng.value || !startLat.value || !endLng.value || !endLat.value) {
    alert('请输入完整的起终点坐标');
    return;
  }

  const startCoords = [parseFloat(startLat.value), parseFloat(startLng.value)];
  const endCoords = [parseFloat(endLat.value), parseFloat(endLng.value)];

  // 创建起点图标
  startMarker = L.marker(startCoords, {
    title: '起点',
    icon: L.icon({
      iconUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png',
      iconSize: [25, 41],
      iconAnchor: [12, 41]
    })
  }).addTo(map).bindPopup('起点');

  // 创建终点图标
  endMarker = L.marker(endCoords, {
    title: '终点',
    icon: L.icon({
      iconUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png',
      iconSize: [25, 41],
      iconAnchor: [12, 41]
    })
  }).addTo(map).bindPopup('终点');
};

onMounted(() => {
  // 初始化地图 - 使用与你的数据相同的坐标系
  map = L.map('geoserver-map').setView([31.984, 118.998], 15);

  // 添加底图（可选）
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; OpenStreetMap contributors'
  }).addTo(map);

  // 加载 GeoServer 发布的 TIF 瓦片 - 修正参数
  const wmsUrl = 'http://localhost:63363/geoserver/pp-vue/wms';
  const layerName = 'pp-vue:汤山DOM_2024';

  wmsLayer = L.tileLayer.wms(wmsUrl, {
    layers: layerName,
    format: 'image/png',
    transparent: true,
    version: '1.1.0',
    crs: L.CRS.EPSG4326,
    attribution: 'GeoServer 正射影像'
  });

  // 如果默认显示正射影像，则添加到地图
  if (showOrthoImage.value) {
    wmsLayer.addTo(map);
  }

// 在 onMounted 函数内的地图点击事件监听器中替换原有逻辑
  map.on('click', function(e) {
    if (selectingPoint === 'start') {
      // 更新输入框值
      startLng.value = e.latlng.lng.toFixed(6);
      startLat.value = e.latlng.lat.toFixed(6);

      // 立即显示起点标记
      if (startMarker) {
        map.removeLayer(startMarker);
      }
      startMarker = L.marker([e.latlng.lat, e.latlng.lng], {
        title: '起点',
        icon: L.icon({
          iconUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png',// 本地绿色图标
          iconSize: [25, 41],
          iconAnchor: [12, 41]
        })
      }).addTo(map).bindPopup('起点');

      // 重置选点状态
      selectingPoint = null;
      map.getContainer().style.cursor = '';

    } else if (selectingPoint === 'end') {
      // 更新输入框值
      endLng.value = e.latlng.lng.toFixed(6);
      endLat.value = e.latlng.lat.toFixed(6);

      // 立即显示终点标记
      if (endMarker) {
        map.removeLayer(endMarker);
      }
      endMarker = L.marker([e.latlng.lat, e.latlng.lng], {
        title: '终点',
        icon: L.icon({
          iconUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png',// 本地红色图标
          iconSize: [25, 41],
          iconAnchor: [12, 41]
        })
      }).addTo(map).bindPopup('终点');

      // 重置选点状态
      selectingPoint = null;
      map.getContainer().style.cursor = '';
    }
  });
});
</script>


<style scoped>

.map-container {
  position: absolute;
  top: 40px; /* 为控件留出空间 */
  left: 0;
  width: 100%;
  height: calc(100% - 40px); /* 减去控件高度 */
}

.panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

.controls {
  position: absolute;
  top: 140px; /* 原来是10px，现在增加150px */
  left: 10px;
  background: white;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.4);
}

.route-panel {
  position: absolute;
  top: 200px; /* 原来是50px，现在增加150px */
  left: 10px;
  background: white;
  padding: 15px;
  border-radius: 4px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.coordinate-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.coordinate-row label {
  font-weight: bold;
  min-width: 40px;
}

.coordinate-row input {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
  width: 100px;
}

.comma {
  font-size: 18px;
  font-weight: bold;
}

.plan-btn {
  padding: 8px 16px;
  background-color: #007cba;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  align-self: flex-start;
}

.plan-btn:hover {
  background-color: #005a87;
}

.select-btn {
  padding: 4px 8px;
  background-color: #6c757d;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
}

.select-btn:hover {
  background-color: #5a6268;
}
</style>